<template>
  <div class="basicInfo">
    <el-tabs
      v-model="editableTabsValue"
      type="card"
      :addable="!hidden && isCreateUser"
      @tab-remove="removeTab"
      @tab-add="selectOrg"
    >
      <el-tab-pane :disabled="true" :closable="false" key="1000">
        <span slot="label">责任单位:</span>
      </el-tab-pane>
      <el-tab-pane
        v-for="(item, index) in editableTabs"
        :key="index"
        :disabled="false"
        :label="item.deptName"
        :name="item.name"
        :closable="item.closable && !hidden && isCreateUser"
      >
        <component
          :is="item.content"
          :depts="item"
          :hideBtn="!item.closable || hidden"
          @planListChange="planListChange"
        ></component>
      </el-tab-pane>
    </el-tabs>
    <dialogPublic
      :title="'信息选择'"
      :show.sync="showDialog"
      @doSubmit="addSeleteMember"
      @doClose="() => (showDialog = false)"
      :fullscreen="true"
      appendTobody
    >
      <newMemberSelect
        ref="newMember"
        v-if="showDialog"
        :seleteSetting="orgMemberSelect"
      ></newMemberSelect>
    </dialogPublic>
  </div>
</template>

<script>
import planList from "./planList.vue";
export default {
  props: {
    planList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    status: {
      type: Number,
    },
    isCreateUser: {
      type: Boolean,
      default: false,
    },
  },
  component: {
    planList,
  },
  data() {
    return {
      showDialog: false,
      orgMemberSelect: {},
      addable: true,
      closable: false,
      editableTabsValue: "1",
      deptName: "",
      editableTabs: [],
      tabIndex: 0,
      hidden: false,
    };
  },
  watch: {
    planList: {
      handler(val) {
        this.init(val);
      },
    },
    status: {
      handler(val) {
        this.hidden = val < 1 ? false : true;
      },
    },
  },
  created() {
    this.hidden = this.status < 1 ? false : true;
  },
  methods: {
    //初始化基本信息
    init(val) {
      let arr = JSON.parse(JSON.stringify(val));
      arr.forEach((item, index) => {
        item.name = `${index + 1}`;
        item.content = planList;
        if (this.isCreateUser) {
          item.closable = true;
        } else {
          if (item.deptId == this.$store.getters.currentOrgInfo.id) {
            item.closable = true;
          } else {
            item.closable = false;
          }
        }
      });
      this.editableTabs = arr;
      this.tabIndex = arr.length;
    },
    addTab(data) {
      let newTabName = ++this.tabIndex + "";
      this.editableTabs.push({
        deptName: data.name,
        deptId: data.id,
        name: newTabName,
        content: planList,
        closable: true,
        issues: [],
      });
      this.editableTabsValue = newTabName;
      this.show = false;
    },
    //点击节点选择人员时
    selectOrg() {
      this.orgMemberSelect = {
        chosedData: [],
        type: "dept-select",
        multiple: false, //单选还是多选
      };
      this.showDialog = true;
    },
    //确定选择人员
    addSeleteMember() {
      let data = this.$refs.newMember.getSelectData();
      this.addTab(data[0]);
      this.showDialog = false;
    },
    //移除标签页
    removeTab(targetName) {
      this.$confirm("确定要删除选中数据吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let tabs = this.editableTabs;
          let activeName = this.editableTabsValue;
          if (activeName === targetName) {
            tabs.forEach((tab, index) => {
              if (tab.name === targetName) {
                let nextTab = tabs[index + 1] || tabs[index - 1];
                if (nextTab) {
                  activeName = nextTab.name;
                }
              }
            });
          }
          this.editableTabsValue = activeName;
          this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
        })
        .catch((e) => {});
    },
    //计划列表改变
    planListChange(val) {
      this.editableTabs.forEach((item) => {
        if (item.name == this.editableTabsValue) {
          item.issues = val;
        }
      });
    },
    getPlanData() {
      let data = JSON.parse(JSON.stringify(this.editableTabs));
      data.forEach((item) => {
        delete item.name;
        delete item.content;
      });
      return data;
    },
  },
};
</script>

<style lang="less" scoped>
.basicInfo {
  .demo {
    text-align: center;
    padding: 10px 50px;
    display: flex;
    .tltle {
      width: 100px;
    }
    .input {
      flex: 1;
    }
  }
  /deep/ .el-tabs {
    .el-tabs__new-tab {
      background: #2c77f4;
      .el-icon-plus {
        content: "\e6d9";
        color: #fff;
        line-height: 19px;
        font-size: 19px;
      }
    }
  }
}
</style>